<script setup lang="ts">
function handleClickLeft() {
  uni.navigateBack()
}
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden">
    <wd-navbar
      title="推荐位设置"
      left-text="返回"
      left-arrow
      :bordered="false"
      @click-left="handleClickLeft"
    />
    <wd-cell-group border>
      <view class="p-[10px] px-[15px]">
        <wd-text text="老板推荐" size="12px" />
      </view>
      <wd-cell title="展示老板推荐分类" center label="设置老板推荐菜，需设置3-6个">
        <wd-switch size="20px" />
      </wd-cell>
      <wd-cell title="推荐菜品" center label="请设置3-6个菜品" is-link>
        <wd-text text="请选择" />
      </wd-cell>
      <view class="p-[10px] px-[15px]">
        <wd-text text="网友推荐" size="12px" />
      </view>
      <wd-cell title="展示网友推荐" center label="展示网友推荐的菜品">
        <wd-switch size="20px" />
      </wd-cell>
      <wd-cell
        title-width="80%"
        title="推荐菜品全部收售罄时是否展示"
        center
        custom-class="no-leading"
      >
        <wd-switch size="20px" />
        <template #label>
          <view class="mt-2">
            <wd-text
              text="如需在菜品全部售罄时仍让展示推荐菜，需至少在小程序点餐页装修中开启[展示售罄菜品]开关"
              size="12px"
            />
          </view>
        </template>
      </wd-cell>
    </wd-cell-group>
  </view>
</template>

<style scoped lang="scss">
:deep(.no-leading.wd-cell) {
  line-height: 18px;
}
</style>
